import { defineConfig } from 'vite'

import { URL, fileURLToPath } from 'node:url'

import { createVuePlugin as vue } from 'vite-plugin-vue2'

import { SERVER_PORT, SERVER_TARGET } from './proxy.config'

import styleImport from 'vite-plugin-style-import'

import { createHtmlPlugin } from 'vite-plugin-html'

import { chunkSplitPlugin } from 'vite-plugin-chunk-split'

import Unocss from 'unocss/vite'

import { presetAttributify, presetUno } from 'unocss'
export default defineConfig({
  plugins: [
    // 解析Vue的插件
    vue(),
    // element ui样式按需引入
    styleImport({
      libs: [
        {
          libraryName: 'element-ui',
          // styleLibraryName: 'theme-chalk',
          esModule: true,
          resolveStyle: (name) => {
            return `theme-chalk/${name}.css`
          }
        }
      ]
    }),
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          title: 'vue2-vite-temp',
          cdn: {
            css: [],
            js: []
          }
        }
      }
    }),
    chunkSplitPlugin({
      strategy: 'default',
      customSplitting: {
        // `react` and `react-dom` 会被打包到一个名为`render-vendor`的 chunk 里面(包括它们的一些依赖，如 object-assign)
        'vue-vendor': ['vue'],
        // 源码中 utils 目录的代码都会打包进 `utils` 这个 chunk 中
        utils: [/src\/utils/]
      }
    }),
    Unocss({
      presets: [
        presetAttributify({
          /* preset options */
        }),
        presetUno()
        // ...custom presets
      ]
    })
  ],

  server: {
    // 启动的端口号
    port: SERVER_PORT,
    // 自动打开浏览器
    open: true,
    // 代理
    proxy: {
      '/api': {
        // 代理地址
        target: SERVER_TARGET,
        changeOrigin: true,
        // 地址重写
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  resolve: {
    // 路径别名
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
